import React, { memo, useEffect } from "react";
import TopBanner from "./c-cps/topBanner";
import HotRecommend from "./c-cps/hot-recommend";
import { RecommendLeft, RecommendRight, RecommendWrapper } from "./style";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { getHotRecommendsAction } from "./store/actionCreators";

const YYRecommend = () => {
  const { hotRecommends } = useSelector(
    state => ({ hotRecommends: state.getIn(["recommend", "hotRecommends"]) }),
    shallowEqual
  );
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getHotRecommendsAction());
  }, [dispatch]);

  return (
    <RecommendWrapper>
      <TopBanner />
      <div className="wrap-v2 wrap_bg">
        <RecommendLeft>
          <HotRecommend hotRecommends={hotRecommends} />
        </RecommendLeft>
        <RecommendRight></RecommendRight>
      </div>
    </RecommendWrapper>
  );
};

export default memo(YYRecommend);
